<template>
  <div class="mini_outer">
    <div class="config_box">
      <p class="title">如何在企业微信关联小程序？</p>
      <div class="box" v-for="item in data" :key="item.id">
        <p class="box_title"
          >{{ item.title }}<span class="link" v-if="item.link">{{ item.link }}</span></p
        >
        <img class="box_imgItem" :src="item.img_link" alt="" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const data = [
    { id: 1, img_link: 'https://static.scrm.keyid.cn/assets/images/web-pc/howApp1.png', title: '1、扫码登陆企业微信后台。', link: 'https://work.weixin.qq.com/' },
    { id: 2, img_link: 'https://static.scrm.keyid.cn/assets/images/web-pc/howApp2.png', title: '2、进入应用管理页面，新建自建应用。' },
    { id: 3, img_link: 'https://static.scrm.keyid.cn/assets/images/web-pc/howApp3.png', title: '3、新建应用时，点击“已有小程序快速创建”。' },
    { id: 4, img_link: 'https://static.scrm.keyid.cn/assets/images/web-pc/howApp4.png', title: '4、在新的公众号授权页面，小程序的超级管理员使用微信扫码页面二维码完成授权。' },
    { id: 4, img_link: '', title: '5、然后在自建应用中看到该小程序的自建应用即可完成关联。' }
  ]
</script>

<style lang="scss" scoped>
  .mini_outer {
    .config_box {
      max-width: 1000px;
      margin: 50px auto;
      .title {
        font-size: 26px;
        margin-bottom: 24px;
      }
      .box {
        &_title {
          margin: 14px 0;
          .link {
            color: #ff6b00;
          }
        }
        &_imgItem {
          width: 100%;
        }
      }
    }

    // width: 305px;
  }
</style>
